<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax技术-1.load方法和get请求和post请求</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
// 如何发送一个GET请求  提交给了php
//             $('input').click(function () {
//                 // $('#box').load('25.test.html?user=lilei&pwd=123');//常见的get请求
//                 $('#box').load('25.test.html .url');// 返回www.baidu.com 可以只要url  html后面 空格 .url 看下
//                 // 看下控制台Response 返回的内容是是完整的 没有过滤
//                 //动态的交互 必须放在php环境中
//                 $('#box').load('25.test.php?url=baidu');//返回值 ajax request
//             });
//如何发送一个post请求
//             $('input').click(function () {
//                 $('#box').load('25.test.php',{
//                     url:'baidu'  //返回ajax request
//                 });
//             });
//回调函数function(response,status,xhr)
            //response回复  可以对返回的数据进行修改
            // status状态
            // xhr回复信息的集合 对象 存储很多值 有时用的到
            // $('input').click(function () {
            //     $('#box').load('25.test.php',{
            //         url:'baidu'  //返回ajax request
            //     },function (response,status,xhr) {
            //         // alert(response);//ajax request
            //         // $('#box').html(response+23333);//返回 ajax request23333  可以对返回的数据进行修改
            //         // alert(status); //success
            //         // alert(xhr);//返回[object Object]
            //         // alert(xhr.responseText);//返回ajax request
            //         // alert(xhr.status);//200 正常 404 not found 不存在
            //         alert(xhr.statusText);//返回  OK  没问题 正常
            //     });
            // });


 //get方法 请求数据 第一种方法
//         $('input').click(function () {
//                 $.get('25.test.php?url=baidu',function (response,status,xhr) {
//                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
//                 });
//             });
//get方法 请求数据 第二种方法
//             $('input').click(function () {
//                 $.get('25.test.php','url=baidu',function (response,status,xhr) {
//                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
//                     //'url=baidu' 只更改了get方法的参数 这样也可以
//                 });
//             });
//get方法 请求数据 第三种方法
//             $('input').click(function () {
//                 $.get('25.test.php',{url:'baidu'},function (response,status,xhr) {
//                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
//                     //'url=baidu' 只更改了get方法的参数 这样也可以  说明get方法的第2个参数可以是字符串也可以是对象
//                 });
//             });
//pos()方法 第一种方法  第2个参数是对象
//             $('input').click(function () {
//                 $.post('25.test.php',{url:'baidu'},function (response,status,xhr) {
//                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
//                 });
//             });
//pos()方法 第二种方法  第2个参数是字符串
//             $('input').click(function () {
//                 $.post('25.test.php','url=baidu',function (response,status,xhr) {
//                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
//                 });
//             });
//post()方法 第4个参数 type 返回的数据内容  可以是html
//             $('input').click(function () {
//                 $.post('25.test.php','url=baidu',function (response,status,xhr) {
//                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
//                 },'html');
//             });
//post()方法 第4个参数 type 返回的数据内容  可以是 xml
//             $('input').click(function () {
//                 $.post('25.test.xml','url=baidu',function (response,status,xhr) {
//                     // alert(response);//[object XMLDocument]
//                     alert($(response).find('root').find('url').text());//www.baidu.com
//                 },'xml');
//             });
//post()方法 第4个参数 type 返回的数据内容  可以是 json 第一种方法
//             $('input').click(function () {
//                 $.post('25.test.json','url=baidu',function (response,status,xhr) {
//                     // alert(response);//[object Object]
//                     alert(response[0].url);//返回值 www.baidu.com
//                 },'json');//'json'可写可不写 会自动识别
//             });
//post()方法 第4个参数 type 返回的数据内容  可以是 json 第2种方法 没有第四个参数 getJSON是专门用来加载js文件的
//             $('input').click(function () {
//                 $.getJSON('25.test.json','url=baidu',function (response,status,xhr) {
//                     // alert(response);//[object Object]
//                     alert(response[0].url);//返回值 www.baidu.com
//                 });
//             });
            //getScript是动态的加载一段JS文件的
            $('input').click(function () {
                $.getScript('25.test.js');//返回hello world  常用的节省性能的方式
            });
        });
    </script>
</head>
<body>
    <input type="button" value="发送请求">
    <div id="box"></div>
    <script>
    /*
一.Ajax主要应用与数据异步请求,局部更新数据,提升用户体验 load方法:
        不用Ajax技术 如果要提交数据与服务器之间的数据通信 会导致整张页面提交,用户体验差
        1.load?(url data callback)方法
        2.get请求 25.test.html?user=lilei&pwd=123  html后面加上? 用&连接多个参数
        3.post请求 一般是第二个参数 以大括号{}进行传递
        get请求和post请求 网络数据请求方式
    1.如何发送一个GET请求  提交给了php
            $('input').click(function () {
                // $('#box').load('25.test.html?user=lilei&pwd=123');//常见的get请求
                $('#box').load('25.test.html .url');// 返回www.baidu.com 可以只要url  html后面 空格 .url 看下
                // 看下控制台Response 返回的内容是是完整的 没有过滤
                //动态的交互 必须放在php环境中
                $('#box').load('25.test.php?url=baidu');//返回值 ajax request
            });
    2.如何发送一个post请求
            $('input').click(function () {
                $('#box').load('25.test.php',{
                    url:'baidu'  //返回ajax request
                });
    3.回调函数function(response,status,xhr)
          //response回复  可以对返回的数据进行修改
          // status状态
          // xhr回复信息的集合 对象 存储很多值 有时用的到
          $('input').click(function () {
              $('#box').load('25.test.php',{
                  url:'baidu'  //返回ajax request
              },function (response,status,xhr) {
                  // alert(response);//ajax request
                  // $('#box').html(response+23333);//返回 ajax request23333  可以对返回的数据进行修改
                  // alert(status); //success
                  // alert(xhr);//返回[object Object]
                  // alert(xhr.responseText);//返回ajax request
                  // alert(xhr.status);//200 正常 404 not found 不存在
                  alert(xhr.statusText);//返回  OK  没问题 正常
              });
          });
二.get(url,data,callback,type)方法
    1.get方法 请求数据 第一种方法  字符串拼接
        $('input').click(function () {
                $.get('25.test.php?url=baidu',function (response,status,xhr) {
                    $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
                });
            });
    2.get方法 请求数据 第二种方法 字符串单独成为get方法的第2个参数
             $('input').click(function () {
                 $.get('25.test.php','url=baidu',function (response,status,xhr) {
                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
                     //'url=baidu' 只更改了get方法的参数 这样也可以
                 });
             });
    3.get方法 请求数据 第三种方法 对象 成为get方法的第2个参数
          $('input').click(function () {
              $.get('25.test.php',{url:'baidu'},function (response,status,xhr) {
                  $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
                  //'url=baidu' 只更改了get方法的参数 这样也可以  说明get方法的第2个参数可以是字符串也可以是对象
              });
          });
三.post(url,data,callback,type)  方法  一般用第一种方法  参数是对象
    1.pos()方法 第一种方法  第2个参数是对象
             $('input').click(function () {
                 $.post('25.test.php',{url:'baidu'},function (response,status,xhr) {
                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
                     //'url=baidu' 只更改了get方法的参数 这样也可以
                 });
             });
    2.pos()方法 第二种方法  第2个参数是字符串
             $('input').click(function () {
                 $.post('25.test.php','url=baidu',function (response,status,xhr) {
                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
                     //'url=baidu' 只更改了get方法的参数 这样也可以
                 });
             });
      });
    3.post()方法 第4个参数 type 返回的数据内容  可以是html
             $('input').click(function () {
                 $.post('25.test.php','url=baidu',function (response,status,xhr) {
                     $('#box').html(response);//修改box的文本内容为response的返回值  ajax request
                 },'html');
             });
    4.post()方法 第4个参数 type 返回的数据内容  可以是 xml
             $('input').click(function () {
                 $.post('25.test.xml','url=baidu',function (response,status,xhr) {
                     // alert(response);//[object XMLDocument]
                     alert($(response).find('root').find('url').text());//www.baidu.com
                 },'xml');
             });
    5.post()方法 第4个参数 type 返回的数据内容  可以是 json 第一种方法
             $('input').click(function () {
                 $.post('25.test.json','url=baidu',function (response,status,xhr) {
                     // alert(response);//[object Object]
                     alert(response[0].url);//返回值 www.baidu.com
                 },'json');//'json'可写可不写 会自动识别
             });
    6.post()方法 第4个参数 type 返回的数据内容  可以是 json 第2种方法 没有第四个参数 getJSON是专门用来加载js文件的
          $('input').click(function () {
              $.getJSON('25.test.json','url=baidu',function (response,status,xhr) {
                  // alert(response);//[object Object]
                  alert(response[0].url);//返回值 www.baidu.com
              });
          });
7.getJSON方法可以节省性能 动态的调用JS文件
            $('input').click(function () {
                $.getScript('25.test.js');
            });
    * */
    </script>
</body>
</html>